<template>
    <view class="custom-detail-container">
        <header-bar :config="config" />
        <date-tab-bar @getNewData="downRefresh" />
        <view class="card-wrapper">
            <custom-card :debt="debt" />
        </view>
        <view class="main" :class="{ 'main-show-time': activeTabIndex == 4 }">
            <mescroll-uni
                ref="mescrollRef"
                @init="mescrollInit"
                @down="downRefresh"
                @up="getNewData"
                :up="upOption"
                :fixed="false">
                <custom-detail-list />
            </mescroll-uni>
        </view>
    </view>
</template>

<script>
import dateTabBar from "../components/date-tab-bar.vue"
import customCard from "../components/custom-card.vue"
import customDetailList from "./childCpns/custom-detail-list.vue"

import { getCustomerStatistics } from "@/service/api/erp.js"

import { mapState } from "vuex"

export default {
    components: {
        dateTabBar,
        customCard,
        customDetailList,
    },
    data() {
        return {
            config: {
                title: "",
                centerSlot: false,
                rightSlot: false,
                backgroundColor: "none",
            },
            debt: {
                WjsTotal: 0,
                TotalMoney: 0,
                HjTotal: 0,
                BdJsTotal: 0,
            },
            customCode: "",
            pageNumber: 1,
            pageSize: 20,
        }
    },
    computed: {
        ...mapState("tabBar", ["activeTabIndex"]),
        ...mapState("report", ["startDate", "endDate"]),
    },
    onLoad(options) {
        this.customCode = options.code
        this.config.title = options.name
        this.getCustomerStatistics()
    },
    methods: {
        async getCustomerStatistics() {
            const res = await getCustomerStatistics({
                startDate: this.startDate,
                endDate: this.endDate,
                bCodeArr: this.customCode ? [this.customCode] : [], // 客户
            })
            if (res.State == 1) {
                const { WjsTotal, TotalMoney, HjTotal, BdJsTotal } = res.Data
                this.debt.WjsTotal = WjsTotal
                this.debt.TotalMoney = TotalMoney
                this.debt.HjTotal = HjTotal
                this.debt.BdJsTotal = BdJsTotal
            }
        },
        async getCustomDetailList() {
            this.$store
                .dispatch("report/fetchCustomDetailList", {
                    pageNumber: this.pageNumber,
                    pageSize: this.pageSize,
                    startDate: this.startDate,
                    endDate: this.endDate,
                    bCodeArr: this.customCode ? [this.customCode] : [],
                })
                .then((res) => {
                    if (res.State == 1) {
                        this.mescroll.endBySize(res.Data.length, res.RecordAmout)
                    } else {
                        this.mescroll.endErr()
                    }
                })
        },
        // 上拉加载
        getNewData(page) {
            this.pageNumber = page.num
            this.getCustomDetailList()
        },
        // 下拉刷新
        downRefresh() {
            this.mescroll.scrollTo(0, 0)
            this.mescroll.resetUpScroll()
            this.getCustomerStatistics()
        },
    },
}
</script>

<style lang="scss">
.custom-detail-container {
    height: 100vh;
    overflow: hidden;

    ::v-deep .hx_font_size {
        font-size: 32rpx;
    }

    .main {
        height: calc(100% - 560rpx);
    }

    .main-show-time {
        height: calc(100% - 620rpx);
    }

    .card-wrapper {
        margin: 24rpx 32rpx 28rpx;
    }
}
</style>
